<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_webpack基本介绍说明</title>
  <!-- 
  Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它将应用程序的所有资源（如 JavaScript、CSS、图片等）视为模块，并通过依赖关系图将这些模块打包成一个或多个输出文件。
  1. 基本概念
  - 模块化：Webpack 支持模块化编程，允许开发者将应用程序拆分成多个模块，每个模块可以独立开发和维护。
  - 打包：Webpack 将所有模块及其依赖关系打包成一个或多个文件，通常是 JavaScript 文件，以便在浏览器中高效加载。
  - 资源管理：Webpack 不仅可以处理 JavaScript 文件，还可以处理 CSS、图片、字体等各种资源。

  2. 工作原理
  - 入口（Entry）：Webpack 从一个或多个入口文件开始构建依赖图。入口文件是应用程序的起点。
  - 输出（Output）：Webpack 将打包后的文件输出到指定的目录，通常是  `dist`  文件夹。可以配置输出文件的名称和路径。
  - 加载器（Loaders）：Webpack 使用加载器来处理非 JavaScript 文件（如 CSS、图片等）。加载器可以将这些文件转换为模块，以便在 JavaScript 中使用。
  - 插件（Plugins）：Webpack 插件用于扩展 Webpack 的功能，执行更复杂的任务，如代码压缩、环境变量设置等。
  3. 基本配置
  Webpack 的配置文件通常是  `webpack.config.js` ，以下是一个简单的配置示例：
  const path = require('path');

  module.exports = {
      entry: './src/index.js', // 入口文件
      output: {
          filename: 'bundle.js', // 输出文件名
          path: path.resolve(__dirname, 'dist') // 输出路径
      },
      module: {
          rules: [
              {
                  test: /\.css$/, // 匹配 CSS 文件
                  use: ['style-loader', 'css-loader'] // 使用的加载器
              }
          ]
      },
      plugins: [
          // 插件配置
      ]
  };
  4. 优点
  - 模块化：支持 ES6 模块、CommonJS 和 AMD 模块，促进代码的组织和重用。
  - 性能优化：通过代码分割、懒加载和压缩等技术，提高应用程序的加载速度和性能。
  - 广泛的生态系统：有大量的插件和加载器，支持各种技术栈和框架（如 React、Vue、Angular 等）。

  5. 总结
  Webpack 是一个强大的构建工具，适用于现代 JavaScript 应用程序的开发。通过模块化、打包和资源管理，Webpack 帮助开发者提高开发效率和应用性能。理解 Webpack 的基本概念和配置对于构建高效的前端应用至关重要。
  -->
</head>
<body>
  
</body>
</html>